<!--后结算--日清--待结算明细 -->
<template>
  <div class="nissin-list-box">
    <el-container class="template-box">
      <!-- tab搜索 -->
      <tabs
        class="tabs"
        :tabs-arr="indexTabsArr"
        @returnIndex="tabsHandle" />
      <!-- 搜索 -->
      <el-header height="auto">
        <SearchForm
          label-width="110px"
          :data="indexSearchData"
          :compact-data="indexSearchData.slice(0,2)"
          show-collapse
          @searchForm="searchForm"
          @resetForm="resetForm"
          :submit-loading='submitLoading'
        />
      </el-header>
      <div class="all-price">
        <el-tooltip placement="top">
          <div slot="content">该金额合计仅供参考，实际月结算金额和该统计金额，<br>可能存在差异。</div>
          <i class="el-icon-warning-outline" />
        </el-tooltip>
        <span class="left-part">金额合计（元）:</span>
        <span class="right-part">{{ allPrice ? getFormatterPrice(allPrice) : 0 }}</span>
      </div>
      <!-- 列表 -->
      <el-editable
        v-loading="tableLoading"
        :data="dataList"
        height="400"
        :columns="indexTableData"
      />
      <!-- 分页模块 -->
      <el-pagination
        align="right"
        @size-change="sizeChange"
        @current-change="pageChange"
        :page-sizes="PAGE_NUMBER"
        :page-size="pageSize"
        :current-page="curPage"
        :layout="PAGINATION_LAYOUT"
        :total="totalElements"/>
    </el-container>
  </div>
</template>

<script>
import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common'
import { indexSearchData, indexTableData, indexTabsArr } from './const'
import { hasIn, cloneDeep } from 'lodash'
import { getFormatterPrice } from '@const/filter'
import SearchForm from '@components/businesscomponents/search'
import ElEditable from '@components/el-editable'
import tabs from '@components/tabs/index.vue'
import {
  saleManagerDailyList,
  saleManagerDailyListCount
} from '@const/beforeSettleApi'
export default {
  components: { ElEditable, SearchForm, tabs },
  data () {
    return {
      // 搜索标题字段
      indexSearchData,
      allPrice: 0,
      // 搜索返回内容
      searchData: {},
      // 表格loading
      tableLoading: false,
      // 列表数据
      dataList: [],
      // 列表表头
      indexTableData,
      // tab字段
      indexTabsArr: cloneDeep(indexTabsArr),
      submitLoading: false,
      tabIndex: 1,

      curPage: 1, // 当前页
      PAGE_NUMBER, // 页码数组
      PAGINATION_LAYOUT, // 页码功能布局
      pageSize: PAGE_NUMBER[0], // 一页的数量
      totalElements: 0 // 总共的条数
    }
  },
  mounted () {
    this.getNumber()
    this.getList()
  },
  methods: {
    getFormatterPrice,
    // 获取列表
    getList () {
      this.submitLoading = true
      this.tableLoading = true
      let data = {
        ...this.searchData,
        orderStatus: this.tabIndex,
        page: this.curPage,
        pageSize: this.pageSize,
        type: 2// 类型（1-医院 2-配送商）
      }
      this.$axios({
        method: 'post',
        url: saleManagerDailyList,
        data: data
      }).then(res => {
        this.allPrice = res.data.payload.allAmount
        let dataArr = res.data.payload.settleOrderItemList || {}
        this.dataList = dataArr.content || []
        this.totalElements = dataArr.totalElements
      })
        .finally(() => {
          this.submitLoading = false
          this.tableLoading = false
        })
    },
    // tabs切换处理事件
    tabsHandle (index) {
      this.tabIndex = this.indexTabsArr[index].val || ''
      this.getList()
    },

    // 获取订单数量
    async getNumber () {
      const res = await this.$axios.$post(saleManagerDailyListCount)
      let arr = hasIn(res, 'payload') ? res.payload : []
      const cloneIndexTabs = cloneDeep(indexTabsArr)
      // 获取对应tab值
      cloneIndexTabs.forEach(item => {
        arr.forEach(ite => {
          if (ite.statusCode === item.val) {
            item.badge = { value: ite.count || null }
          }
        })
      })
      // // 全部数量
      let allCount = cloneIndexTabs.reduce((pre, next) => {
        return pre + next.badge.value || 0
      }, 0)
      ;[...cloneIndexTabs].pop().badge.value = allCount || null
      this.indexTabsArr = cloneIndexTabs
    },

    // 搜索功能-点击查询
    searchForm (condition) {
      this.curPage = 1
      this.searchData = condition
      this.getList()
    },

    // 点击重置
    resetForm (condition) {
      this.curPage = 1
      this.searchData = condition
    },

    // 页码更改
    sizeChange (size) {
      this.pageSize = size
      this.getList()
    },

    // 切换不一样的页面,重置一切数据
    pageChange (curPage) {
      this.curPage = curPage
      this.getList()
    }
  }
}
</script>

<style lang="less" scoped>
@import '../m-front-common/pc/assets/var.less';
.invoice-list-box {
  background: @bgColor;
  .el-header {
    background: #fff;
    padding: 10px;
    margin-bottom: 8px;
  }
  .template-box {
    height: 100%;
    overflow: auto;
  }
  .left-part {
    color: #909db0;
  }
  .right-part {
    color: red;
  }
  .all-price {
    padding: 10px;
    & > i {
      font-size: 16px;
    }
  }
}
</style>
